<template>
  <div class="view-image-switch">
    <template>
      <img :src="imageURL" :style="[filterClass]" crossorigin="anonymous" @dragstart.prevent @dragover.prevent
           @drop.prevent/>
    </template>
    <svg id="svg" style="width: 100%;height:100%">
      <defs>
        <filter :id="detail.identifier + '_svg'">
          <feColorMatrix :values="this.hexTofeColorMatrix(detail.style.foreColor)" color-interpolation-filters="sRGB"
                         type="matrix"/>
        </filter>
      </defs>
    </svg>
    <div v-show="false">{{ colorChange }}{{ imageUrlChange }}</div>
  </div>
</template>

<script>
import BaseView from './View';
import switchImage from '../images/switch_128.png';
import request from '@/utils/request';
import topoUtil from '../util/topo-util';

export default {
  name: 'view-image-switch',
  extends: BaseView,
  computed: {
    colorChange() {
      if (this.detail.style.foreColor && this.detail.style.isFilter) {
        this.filterClass.marginLeft = '';
        this.filterClass.filter = 'url(#' + this.detail.identifier + '_svg)'
        this.animationClass = {}
      } else if (this.detail.style.foreColor && this.detail.style.isFilter == false) {
        this.filterClass.marginLeft = '-10000px'
        this.filterClass.filter = 'drop-shadow(5000px 0px ' + this.detail.style.foreColor + ')'
        this.animationClass = {
          'overflow': 'hidden',
          'position': 'relative'
        };
      } else {
        this.animationClass = {}
        this.filterClass.marginLeft = '';
        this.filterClass.filter = '';
      }
      return this.detail.style.foreColor;
    },
    imageUrlChange() {
      if (this.detail.style.url) {
        this.imageURL = this.detail.style.url
      } else {
        this.imageURL = switchImage
      }
      return this.detail.style.url;
    }
  },
  data() {
    return {
      filterClass: {
        width: '100%',
        height: '100%',
        filter: '',
        position: 'absolute',
        animation: this.detail.hdClassName + ' 5s infinite'
      },
      imageURL: '',
      deviceTimer: null,
    }
  },
  watch: {
    paramValue(newVal, oldVal) {
      // console.log('多态开关',newVal);
      if (newVal == null) {
        newVal = 0;
      }
      this.detail.dataBind.stateList.forEach(element => {
        let isSure = topoUtil.judgeSize(element.paramCondition, newVal, element.paramData);
        if (this.detail.dataBind.controValue == '0开1关') {
          if (val == 1) {
            this.detail.dataAction.actualValue = '关'
          } else {
            this.detail.dataAction.actualValue = '开'
          }
        } else if (this.detail.dataBind.controValue == '0关1开') {
          if (val == 0) {
            this.detail.dataAction.actualValue = '关'
          } else {
            this.detail.dataAction.actualValue = '开'
          }
        } else if (this.detail.dataBind.controValue == '多态开关') {
          this.detail.dataBind.paramValue = newVal;
        }
        if (isSure) {
          this.detail.style.foreColor = element.foreColor
          this.imageURL = element.imageUrl
        }
      });
    }
  },
  mounted() {
    if (this.detail.dataBind.activeName == '设备状态') {
      this.getDeviceRealStatus(this.detail.dataBind.paramName);
      this.deviceTimer = setInterval(() => {
        this.getDeviceRealStatus(this.detail.dataBind.paramName);
      }, 60000);
    }
    if (this.detail.style.url) {
      this.imageURL = this.detail.style.url;
    } else {
      this.imageURL = switchImage
    }
  },
  beforeDestroy() {
    clearInterval(this.deviceTimer)
    this.deviceTimer = null;
  },
  methods: {
    getDeviceRealStatus(deviceImei) {
      let query = {
        deviceMac: deviceImei
      }
      let url = "/zutai/bDeviceManager/list"
      request({
        url: url,
        method: "get",
        params: query,
      }).then((res) => {
        if (res.rows.length > 0) {
          let deviceStatus = res.rows[0].deviceStatus
          console.log("deviceStatus", deviceStatus);
          if (this.detail.dataBind.openImageUrl && this.detail.dataBind.shutImageUrl) {
            if (deviceStatus == 1) {
              this.imageURL = this.detail.dataBind.openImageUrl;
            } else if (deviceStatus == 2) {
              this.imageURL = this.detail.dataBind.warnImageUrl;
            } else {
              this.imageURL = this.detail.dataBind.shutImageUrl;
            }
          } else {
            this.imageURL = this.imageURL;
          }
        } else {
          this.imageURL = this.imageURL;
        }

      }).catch(err => {
      })
    },
    hexTofeColorMatrix(hex) {
      // console.log('hex',hex);
      if (!hex) {
        hex = '0000'
      }
      hex = hex.replace('#', '')
      let RGB = [];
      let numberList = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
      for (let i = 0; i < hex.length; i += 2) {
        const firstDigit = parseInt(hex[i], 16);

        const firstDigitPartial = firstDigit * 16;

        let RGBValue = parseInt(hex[i + 1], 16) + firstDigitPartial;

        RGBValue = RGBValue / 255;

        RGBValue = RGBValue.toFixed(2);

        RGB.push(RGBValue);
      }

      const red = RGB[0];
      const green = RGB[1];
      const blue = RGB[2];

      numberList[0] = red;
      numberList[6] = green;
      numberList[12] = blue;
      return numberList.join(' ')
    },
  }

}
</script>

<style lang="scss">
.view-image-switch {
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
